<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      width="800px"
      :visible.sync="dialogVisible"
      :before-close="tableClose"
    >
      <el-form
        :rules="FormRules"
        label-position="right"
        :model="addInfo"
        label-width="120px"
        ref="formRef"
        inline
        size="mini"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item prop="name" label="产品名称：">
              <el-input v-model="addInfo.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="sku" label="SKU：">
              <el-input v-model="addInfo.sku"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="specification" label="规格：">
              <el-input
                placeholder="请输入内容"
                v-model="addInfo.specification"
                class="input-with-select"
              >
                <el-select
                  v-model="addInfo.unit"
                  placeholder="单位"
                  slot="append"
                  style="width: 70px"
                  @change="changeEvent5"
                >
                  <el-option
                    v-for="item in unitList"
                    :key="item.id"
                    :label="item.type"
                    :value="item.type"
                  ></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="factoryId" label="所属加工厂id：">
              <el-input v-model="addInfo.factoryId"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="supplierId" label="供应商id：">
              <el-input v-model="addInfo.supplierId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="variety" label="所属种类：">
              <el-select
                v-model="addInfo.variety"
                placeholder="请选择"
                @change="changeEvent"
              >
                <el-option
                  v-for="item in varietyList"
                  :key="item.id"
                  :label="item.type"
                  :value="item.type"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="type" label="产品类型：">
              <el-select
                v-model="addInfo.type"
                placeholder="请选择"
                @change="changeEvent1"
              >
                <el-option
                  v-for="item in productType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="tagStatus " label="电子标签状态：">
              <el-select
                v-model="addInfo.tagStatus"
                placeholder="请选择"
                @change="changeEvent4"
              >
                <el-option
                  v-for="item in tagStatusList"
                  :key="item.id"
                  :label="item.type"
                  :value="item.type"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="inputType " label="投入品类型:">
              <el-select
                v-model="addInfo.inputType"
                placeholder="请选择"
                @change="changeEvent2"
              >
                <el-option
                  v-for="item in inputList"
                  :key="item.id"
                  :label="item.type"
                  :value="item.type"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="level " label="产品等级：">
              <el-select
                v-model="addInfo.level"
                placeholder="请选择"
                @change="changeEvent3"
              >
                <el-option
                  v-for="item in levelList"
                  :key="item.id"
                  :label="item.type"
                  :value="item.type"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="price" label="单价：">
              <el-input v-model="addInfo.price">
                <el-button slot="append">元</el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="brand " label="品牌：">
              <el-input v-model="addInfo.brand"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="bestBeforeDate" label="最佳食用期:">
              <el-input v-model="addInfo.bestBeforeDate">
                <el-button slot="append">天</el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="expirationDate " label="保质期:">
              <el-input v-model="addInfo.expirationDate">
                <el-button slot="append">月</el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="authentication " label="产品认证：">
              <el-upload
                action="http://120.77.156.205:9608/processing/processing-material/"
                list-type="picture-card"
                :on-success="changePictureSuccess1"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible1">
                <img width="100%"  alt="">
              </el-dialog>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="images " label="图片：">
              <el-upload
                action="http://120.77.156.205:9608/processing/processing-material/"
                list-type="picture-card"
                :on-success="changePictureSuccess"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="introduction " label="产品简介：">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="addInfo.introduction">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="originPlace " label="产地：">
              <el-cascader
                size="mini"
                :options="options"
                v-model="addInfo.originPlace">
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <div>-----------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
          <el-form-item prop="purchaseChannel " label="产品购买渠道："></el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="purchaseChannel.id " label="渠道id：">
              <el-input v-model="addInfo.purchaseChannel.id"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="purchaseChannel.platform" label="电商平台：">
              <el-select
                v-model="addInfo.purchaseChannel.platform"
                placeholder="请选择"
                @change="changeEvent6"
              >
                <el-option
                  v-for="item in nameList"
                  :key="item.id"
                  :label="item.type"
                  :value="item.type"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="purchaseChannel.name " label="渠道名称：">
              <el-input v-model="addInfo.purchaseChannel.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="purchaseChannel.url" label="渠道网址：">
              <el-input v-model="addInfo.purchaseChannel.url"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div>-----------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
        <el-row>
          <el-form-item prop="video " label="产品视频信息："></el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="video.id " label="视频序号：">
              <el-input v-model="addInfo.video.id"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="video.name " label="视频名称：">
              <el-input v-model="addInfo.video.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="video.url " label="视频网址：">
              <el-input v-model="addInfo.video.url"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div>-----------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="qrCode" label="产品二维码：">
              <el-input v-model="addInfo.qrCode"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeform()">取 消</el-button>
        <el-button type="primary" @click="addMaterInfo">{{
          message
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { regionData } from 'element-china-area-data'
import { 
  addInfo,
  purchaseWay,
} from "../../../Api/processingplant/process_material";

export default {
  name: "FromInfo",
  inject: ["reload"],
  components: { regionData },
  props: {
    //是否打开表单
    dialogVisible: {
      Boolean,
      default: false,
    },
    //所属品种
    varietyList: {
      Array,
    },
    //产品类型
    productType: {
      Array,
    },
    //表头
    dialogTitle: {
      String,
    },
    message: {
      String,
    },
    unitList: {
      Array,
    },
    inputList: {
      Array,
    },
    levelList: {
      Array,
    },
    tagStatusList: {
      Array,
    },
    areaCode: null,
  },
 
  data() {
    return {
      options: regionData,
      addInfo: {
        authentication: "{}",
        bestBeforeDate: 0,
        brand: "",
        name: "",
        price: "",
        purchaseChannel: {
          id:0,
          name:'',
          platform:'',
          url:''
        },
        sku: "",
        count: 0,
        expirationDate: "",
        factoryId: 0,
        images: "",
        inputType: "",
        introduction: "",
        level: 0,
        originPlace: [],
        specification: "",
        supplierId: 0,
        tagStatus: 0,
        type: "",
        unit: "",
        variety: "",
        qrCode: "",
        video: {
          id:0,
          name:'',
          url:''
        },
      },
      dialogImageUrl: '',
      dialogVisible1: false,
      select: "",
      fileList: [],
      //表单规则
      FormRules: {
        sku: [{
          required: true,
          message: '请输入'
        }],
        name: [{
          required: true,
          message: '请输入'
        }],
        supplierId: [{
          required: true,
          message: '请输入'
        }],
        variety: [{
          required: true,
          message: '请输入'
        }],
        type: [{
          required: true,
          message: '请输入'
        }],
        specification: [{
          required: true,
          message: '请输入'
        }],
        unit: [{
          required: true,
          message: '请输入'
        }],
        supplierId: [{
          required: true,
          message: '请输入'
        }],
        price: [{
          required: true,
          message: '请输入'
        }],
      },
      textarea:'',
      nameList:[
        {
          id:0,
          type:'京东'
        },
        {
          id:1,
          type:'淘宝'
        },
        {
          id:2,
          type:'一号店'
        },
        {
          id:3,
          type:'天猫'
        },
        {
          id:4,
          type:'微店'
        },
      ],
    };
  },
  computed: {},
  created(){
  },
  watch: {
  },
  methods: {

    // 关闭弹窗
    tableClose() {
      this.$confirm("确认关闭？")
        .then(() => {
          this.closeform();
        })
        .catch(() => {});
    },
    //选择所属类型
    changeEvent(index) {
      console.log(index);
      this.addInfo.variety = this.varietyList[index].type;
    },
    changeEvent1(index) {
      console.log(index);
      this.addInfo.type = this.productType[index].name;
    },
    changeEvent2(index) {
      console.log(index);
      this.addInfo.inputType = this.inputList[index].type;
    },
    changeEvent3(index) {
      console.log(index);
      this.addInfo.level = this.levelList[index].type;
    },
    changeEvent4(index) {
      console.log(index);
      this.addInfo.tagStatus = this.tagStatusList[index].type;
    },
    changeEvent5(index) {
      console.log(index);
      this.addInfo.unit = this.unitList[index].type;
    },
    changeEvent6(index) {
      console.log(index);
      this.addInfo.purchaseChannel.platform = this.nameList[index].type;
    },
    //  添加原辅料信息
    addMaterInfo() {
      this.$refs["formRef"].validate(async(valid)=>{
        if(valid){
          console.log("kkk", this.addInfo);
          const { data: res } = await addInfo(this.addInfo);
          console.log(res);
          if (res.statusCode === 20000) {
            this.$message.success("增加成功");
            this.dialogVisible = false;
            this.addInfo = {};
          } else {
            if (res.data == null) {
              return this.$message.error("添加失败");
            }
          }
          this.reload();
        }else{
          return this.$message.error("请输入完整信息");
        }
      })
    },
    
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    changePictureSuccess1() {
      // let pic = JSON.parse(res.data);
      // this.addInfo.authentication = pic.url;
      // this.dialogVisible1 = true;
    },
    
    changePictureSuccess(res) {
      // let pic = JSON.parse(res.data);
      // this.addInfo.images = pic.url;
      // this.dialogVisible1 = true;
    },
    // 关闭编辑表单弹窗
    closeform() {
      this.$emit("closeDialog");
    },
    
  },
  
};
</script>

<style scoped>
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__append {
  background-color: #fff;
}
</style>